<template>
    <d2-container>
        <el-form ref="detailForm" :model="detailForm" label-width="100px">
            <el-form-item label="绑定店铺">
                <el-input class="muse_from_width" placeholder="绑定店铺" v-model="detailForm.storeName"></el-input>
            </el-form-item>
            <el-form-item label="优惠券名称">
                <el-input class="muse_from_width" placeholder="优惠券名称" v-model="detailForm.title"></el-input>
            </el-form-item>
            <el-form-item label="使用类型">
                <el-select class="muse_from_width"  v-model="detailForm.validType" placeholder="使用类型">
                    <el-option
                            v-for="item in validTypeAry"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="折扣类型">
                <el-select class="muse_from_width" v-model="detailForm.discountType" placeholder="折扣类型">
                    <el-option
                            v-for="item in discountTypeAry"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="折扣金额">
                <el-input-number class="muse_from_width" placeholder="折扣金额" v-model="detailForm.discount" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item label="领取时间">
                <el-date-picker
                        class="muse_from_width"
                        v-model="detailForm.pickData"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始领取时间"
                        end-placeholder="结束领取时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="使用时间">
                <el-date-picker
                        class="muse_from_width"
                        v-model="detailForm.useData"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始使用时间"
                        end-placeholder="结束使用时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="有效期类型">
                <el-select class="muse_from_width" v-model="detailForm.useExpireType" placeholder="有效期类型">
                    <el-option
                            v-for="item in useExpireTypeAry"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="detailForm.useExpireType === 2" label="有效期天数">
                <el-input-number class="muse_from_width" placeholder="有效期天数" v-model="detailForm.useExpireDay" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item label="总发行量">
                <el-input-number class="muse_from_width" placeholder="总发行量" v-model="detailForm.totalCount" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item label="现存量">
                <el-input-number class="muse_from_width" placeholder="现存量" v-model="detailForm.currentCount" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
            <el-form-item label="限领量">
                <el-input-number class="muse_from_width" placeholder="限领量" v-model="detailForm.limit" controls-position="right" :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="限定商品">
                <el-input class="muse_from_width" placeholder="限定商品" v-model="detailForm.limit"></el-input>
            </el-form-item>
            <el-form-item label="限定商品种类">
                <el-input class="muse_from_width" placeholder="限定商品种类" v-model="detailForm.limit"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input
                        class="muse_from_width"
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 100}"
                        placeholder="限定商品种类"
                        v-model="detailForm.description">
                </el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                <el-button @click="resetForm('detailForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

<script>
  export default {
    name: 'changeCoupon',
    data() {
      return {
        detailForm: {},
        // 使用类型
        validTypeAry: [
          {
            value: 0,
            label: '无限制'
          },
          {
            value: 1,
            label: '满足条件'
          },
          {
            value: 2,
            label: '限定产品'
          }
        ],
        // 折扣类型
        discountTypeAry: [
          {
            value:0,
            label: '便宜多少'
          },
          {
            value:1,
            label: '打折多少'
          },
          {
            value:2,
            label: '免费'
          }
        ],
        // 有效期类型
        useExpireTypeAry: [
          {
            value: 0,
            label: '永久有效'
          },
          {
            value: 1,
            label: '根据范围计算'
          },
          {
            value: 2,
            label: '领取后天数'
          }
        ]
      }
    },
    computed: {
    },
    methods: {
      // 表单提交
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          } else {
            return false;
          }
        });
      },
      // 表单重置
      resetForm () {
        this.detailForm = this.oldDetailForm
      }
    }
  }
</script>

<style scoped>

</style>
